<template>
  <el-container>
    <PublicHeader :menus="menus" bgColor="#272e38"  :active-text-color="'#4285F4'">
      <template slot="left">
        <img src="/static/logo/logo_blue.png" alt="logo" width="128px">
      </template>
      <template slot="right" v-if="$store.getters.isLogin">
        <el-button type="primary" @click="toCourse">进入课堂</el-button>
      </template>
      <template slot="right" v-else>
        <el-button class="" @click="toLogin">登 录</el-button>
        <el-button class="registerButton" @click="toRegister">注 册</el-button>
      </template>
    </PublicHeader>
    <el-main>
      <div class="carousel">
        <el-carousel height="470px">
          <el-carousel-item v-for="(item, index) in image" :key="index">
            <el-image :src="item.src" class="img">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="blendList">
        <div>
          <div class="head">
            <div class="title">混合教学全过程管理</div>
            <div class="detail">课前、课中、课后，线上线下，教学场景全过程管理</div>
          </div>
          <div class="list">
            <ul>
              <li v-for="item in blendList">
                <div class="headImg">
                  <el-image :src="item.imgSrc" style="  width: 64px;height: 64px;display: block;margin: 0 auto;">
                    <div slot="placeholder" class="image-slot">
                      加载中<span class="dot">...</span>
                    </div>
                  </el-image>
                </div>
                <div class="title">{{ item.title }}</div>
                <div class="detail">{{ item.detail }}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="wisdom">
        <div class="head">
          <div class="title">智慧教学平台</div>
        </div>
        <div class="list">
          <ul>
            <li v-for="item in wisdomList">
              <div class="headImg">
                <el-image :src="item.imgSrc" style=" width: 64px;height: 64px;display: block;margin: 0 auto;">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </div>
              <div class="title">{{ item.title }}</div>
              <div class="detail">{{ item.detail }}</div>
            </li>
          </ul>
        </div>
        <div class="understand">
          <div class="content">
            <button class="und">了解详细功能</button>
            <button class="now" @click="toRegister">立即注册体验</button>
          </div>
        </div>
      </div>

      <div class="mechanisnm">
        <div>
          <div class="head">
            <div class="title">课堂派机构版</div>
          </div>
          <div class="conten">
            <div class="mecleft">
              <el-image :src="require('../../static/png/mecShow.png')">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
            <div class="mecright">
              <ul>
                <li v-for="item in mechanisnmList">
                  <div class="title">
                    <div class="choose">
                      <el-image :src="require('../../static/png/circle.png')" style="width: 20px; height: 20px">
                        <div slot="placeholder" class="image-slot">
                          加载中<span class="dot">...</span>
                        </div>
                      </el-image>
                    </div>
                    <div class="content">{{ item.content }}</div>
                  </div>
                  <div class="detail">{{ item.detail }}</div>
                </li>
              </ul>
              <div class="rightButton">
                <button class="und">了解详细功能</button>
                <button class="now">申请免费试用</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="media">
        <div class="head">
          <div class="title">媒体报道</div>
        </div>
        <!--        <el-carousel autoplay="false" indicator-position="outside" :interval="4000" type="card" height="400px">-->
        <el-carousel :autoplay="false" arrow="never" indicator-position="outside" type="card" height="465px">
          <el-carousel-item v-for="(item, index) in mediaList" :key="index">
            <div class="item-content">
              <el-image :src="item.imgSrc"
                        style="height: 381px;width: 273px;position: absolute;left: 38px;top: 40px;border-radius: 8px;z-index: 1;">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
              <div class="newContent">
                <p class="title">{{ item.title }}</p>
                <p class="content">{{ item.content }}</p>
                <el-button type="primary">查看详情</el-button>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="school">
        <div class="head">
          <div class="title">
            <span class="number">10000+</span>
            <span>所学校的师生正在使用课堂派</span>
          </div>
        </div>
        <div class="schoolList">
          <el-image :src="require('../../static/png/nowUseSchool.png')" style="display: block; height: 520px">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </div>

      <div class="welcome">
        <div class="show">
          <div class="content">
            <div class="head">欢迎使用课堂派</div>
            <div class="detail">精彩教学，从这里开启</div>
            <div class="buttonConten">
              <button class="lian">联系课堂派</button>
              <button class="free" @click="toRegister">免费注册</button>
            </div>
          </div>
        </div>
      </div>

      <!--      <router-view/>-->
    </el-main>
    <el-footer style="height: 100%; padding: 0; background-color: #272E38; min-width: 1224px">
      <div class="layer-one">
        <div class="left">
          <div class="bottom-logo">
            <img src="../../static/logo/bottomLogo.png" alt="logo" height="42px">
          </div>
          <ul>
            <li v-for="item in bottomList">
              <a href="#">{{ item.name }}</a>
            </li>
          </ul>
        </div>
        <div class="right">
          <div class="contact">
            <p>联系我们</p>
            <p>(工作日09:30～18:30)</p>
            <p>
              <i class="el-icon-phone-outline"> 010-57748642 </i>
            </p>
            <p>
              <i class="el-icon-message"> hi@ketangpai.com </i>
            </p>
          </div>
          <div class="qrcode">
            <img src="../../static/qrcode/tangtang.png" alt="堂堂" width="160px">
            <p>课堂派客服-堂堂</p>
          </div>
          <div class="qrcode">
            <img src="../../static/qrcode/paipai.png" alt="派派" width="160px">
            <p>课堂派客服-派派</p>
          </div>
          <div class="qrcode">
            <img src="../../static/qrcode/portalQRcode.png" alt="移动教学" width="160px">
            <p>扫码开启移动教学</p>
          </div>
        </div>
      </div>
      <div class="layer-two">
        <span>
           Copyright © 2014 ketangpai.com All Rights Reserved.
          <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/recordQuery">京ICP备14023276号-4</a>
        </span>
        <span>
          <a target="_blank" href="https://app.eduyun.cn/mapp/mappCorpDetail?id=003344">教APP备1101923号</a>
        </span>
        <span>
          <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402010566">京公网安备 11011402010566号</a>
        </span>
      </div>
    </el-footer>
  </el-container>
</template>
<script>
import PublicHeader from "../components/PublicHeader";

export default {
  name: "Index",
  components: {
    PublicHeader,
  },
  data() {
    return {
      menus: [
        {
          name: "首页",
          route: "/MainPage"
        },
        {
          name: '产品功能',
          route: '/ProductFeatures'
        },
        {
          name: '机构版',
          route: '/InstitutionalVersion'
        },
        {
          name: '渠道合作',
          route: '/ChannelsOfCooperation'
        },
        {
          name: '会员权益',
          route: '/RightsAndInterestsOfMembers'
        },
        {
          name: '帮助中心',
          route: '/HelpCenter'
        }
      ],
      image: [
        {
          src: require('../../static/banner/banner-home.png'),
          // src: require('https://www.ketangpai.com/img/banner-home03.f97cf0e7.png'),
          alt: '轮播1'
        },
        {
          src: require('../../static/banner/banner-home01.jpg'),
          // src: require('https://www.ketangpai.com/img/banner-home01.9994acf5.jpg'),
          alt: '轮播2'
        }
      ],
      bottomList: [
        {
          name: '关于我们'
        },
        {
          name: '服务条款'
        },
        {
          name: '产品动态'
        },
        {
          name: '浏览器下载'
        },
      ],
      blendList: [
        {
          imgSrc: require('../../static/png/task.png'),
          title: '作业',
          detail: '81 种文档格式作业在线展示和批阅，实时查重，精准对比，避免学生抄袭。 自动管理成绩，一键下载作业数据。'
        },
        {
          imgSrc: require('../../static/png/exam.png'),
          title: '考试/练习',
          detail: '单选、多选、填空、简答等10余种题型。支持题库随机抽题组卷。支持限时考试、选项随机等防作弊模式。'
        },
        {
          imgSrc: require('../../static/png/data.png'),
          title: '课件资料',
          detail: '课件、资料、话题、公告等教学内容支撑。在线制作方便快捷，提升备课效率。支持课前发布活动，课中互动，课后巩固。'
        },
        {
          imgSrc: require('../../static/png/interaction.png'),
          title: '课中互动',
          detail: '课件在线讲解、标记疑问 支持发言、开启弹幕、抢答、提问、话题讨论、黑板、画笔标注课堂要点，让课堂更精彩。'
        },
        {
          imgSrc: require('../../static/png/sign_in.png'),
          title: '考勤签到',
          detail: '二维码、数字口令、GPS等5种考勤形式， 精准有效、避免代签 签到数据自动生成，一键导出。'
        },
        {
          imgSrc: require('../../static/png/PerformanceManagement.png'),
          title: '成绩管理',
          detail: '汇总互动数据、平时成绩、期末成绩 个性化配置成绩权重占比数据报表一键导出下载，课留存，可追溯。'
        },
        {
          imgSrc: require('../../static/png/dataAnalysis.png'),
          title: '教学数据分析',
          detail: '全方位教学数据信息化，可视化实时监测教学质量，把控教学进度，学业预警分析，提升教学效果。'
        },
        {
          imgSrc: require('../../static/png/live.png'),
          title: '直播-云录屏',
          detail: '满足线上线下混合式教学场景 动画及课件同屏+语音实现轻量级直播 不限人员数量，手机电脑均可参与。'
        },
      ],
      wisdomList: [
        {
          imgSrc: require('../../static/png/OfflineInteractive.png'),
          title: '线下互动课堂',
          detail: '多种互动教学工具，沉浸式学习体验，精准化学习。'
        },
        {
          imgSrc: require('../../static/png/hybridManagement.png'),
          title: '混合教学全过程管理',
          detail: '课前课中课后全过程教学管理，教学数据可视化，可留存，提升教学质量。'
        },
        {
          imgSrc: require('../../static/png/LiveOnlineClassroom.png'),
          title: '在线直播教室',
          detail: '在线直播教学搭配教学互动，充分还原真实的教学场景，提升教学效果。'
        },
        {
          imgSrc: require('../../static/png/OnlineCourseConstruction.png'),
          title: '在线课程建设',
          detail: '在线直播课、精品慕课资源、课程资源体系搭建，沉淀教学资源。'
        },
      ],
      mechanisnmList: [
        {
          content: '精准高效管理教学事务',
          detail: '一键对接教务系统，精准高效管理师生教学、课程、课务。'
        },
        {
          content: '有效提升教学质量',
          detail: '以课堂教学为核心，以产出为导向；实时监控师生、课程、教学活动等教学过程。'
        },
        {
          content: '教学资产管理',
          detail: '沉淀教学过程资产，促进优质课程、资源、知识图谱建设。'
        },
        {
          content: '智慧校园全景定制',
          detail: '以学生为中心，以教学为导向，提供校园全景智慧教学解决方案。'
        },
      ],
      mediaList: [
        {
          imgSrc: require('../../static/mediaReports/5.png'),
          title: '助力智慧课堂：课堂派成为腾讯微校生态战略伙伴',
          content: '7月18日，腾讯微校发布会在北京船山书院如期举行，正式推出以微信校园卡、腾讯校园码为核心的数字校园解决方案——腾讯微校2.0。本次发布会突破传统Q&A的传统模式，现场模拟校园场景，利用“一款非常好用的应用”课堂派进行了现场互动。作为腾讯微校的生态战略伙伴，互动教学品牌课堂派展现了科技时代，智慧课堂所带来的创新和变化。'
        },
        {
          imgSrc: require('../../static/mediaReports/4.png'),
          title: '课堂派亮相2018中国“互联网+”数字经济峰会',
          content: '4月12日下午教育分论坛，北京大学软件与微电子学院林院长分享了智慧课堂的建设经验：教学资源呈现多样化、课堂形式丰富、如何把学生从玩手机的屏幕聚焦到课堂互动环节等方面。林院长表示，课堂派在研发过程中，学院的一线教师主动参与，把很多丰富的实际教学经验融入研发当中，使整个智慧课堂的建设更具实用性和前瞻性。'
        },
        {
          imgSrc: require('../../static/mediaReports/6.png'),
          title: '新时代新青年 课堂派创始人陈杰宾的创业梦',
          content: '6月26日，中国共产主义青年团第十八次全国代表大会在人民大会堂开幕。共青团委对福建省驻京团工委点赞，CCTV新闻频道进行了同步报道。分享会上，课堂派创始人陈杰宾作为闽籍创业青年代表，向在京青年创业者分享了课堂派的发展模式以及创业历程。'
        },
        {
          imgSrc: require('../../static/mediaReports/2.png'),
          title: '【新浪新闻】课堂派云管理颠覆高校传统实习模式',
          content: '用课堂派最大的好处就是在学习的过程中，随时跟老师进行沟通和分享，无论从知识和情感层面都需要倾诉，而课堂派不仅提供跟老师同学交流的机会，还能够获得别人的指导和鼓励，让整个学习过程更加轻松。'
        },
        {
          imgSrc: require('../../static/mediaReports/4.png'),
          title: '【华北电力大学】“互联网+”让教育发现每一个学生',
          content: '“课堂上教师要及时了解学生对内容的掌握程度，课下学生也希望教师能对自己的学习困难进行及时的指导。”在以前，这些实现起来比较困难的事情，“课堂派”可以让这一切变得轻而易举。'
        }
      ]
    }
  }, methods: {
    toLogin() {
      this.$router.push({path: '/login'});
    },
    toRegister() {
      this.$router.push({path: '/register'})
    },
    toCourse() {
      this.$router.push({path: '/courseList'})
    }
  }
}
</script>

<style scoped>
.el-main {
  padding: 0;
}

.header .left img {
  cursor: pointer;
}

.registerButton {
  background-color: #409eff;
  color: white;
  outline: none;
}

.logo {
  width: 454px;
  height: 80.8px;
  position: relative;
  /*top: 50%;*/
  /*transform: translateY(-50%);*/
  object-fit: cover;
  object-position: left;
}

@media screen and (max-width: 1090px) {
  .logo {
    width: 76px;
  }
}

.carousel .img {
  height: 470px;
}

.blendList {
  background: linear-gradient(180deg, #fff, #f4f8ff 42%);
}

.blendList > div {
  height: 952px;
  width: 1224px;
  margin: 0 auto;
}

.blendList .head {
  text-align: center;
  padding: 64px 0 40px;
}

.blendList .head .title {
  font-size: 40px;
  font-weight: 500;
  color: #1f2023;
}

.blendList .head .detail {
  height: 32px;
  font-size: 20px;
  color: #74787c;
  margin-top: 16px;
}

.blendList .list {
  padding: 0;
}

.list ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.list ul li {
  height: 232px;
  text-align: center;
  width: 243px;
  background: linear-gradient(180deg, #fff, #f4f8ff 130%);
  border-radius: 8px 8px 0 8px;
  margin-top: 24px;
  padding: 40px 24px;
  list-style: none;
}

.wisdom ul li {
  width: 224px;
  height: 236px;
  padding: 0 30px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 20px 20px 100px -63px #8297b2;
}

.list .headImg {
  width: 64px;
  margin: 0 auto;
  height: 64px;
  margin-bottom: 24px;
}

.list .title {
  font-weight: 600;
  color: #1f2023;
  font-size: 24px;
  margin-bottom: 8px;
}

.list .detail {
  font-size: 14px;
  color: #74787c;
  line-height: 24px;
}

.wisdom {
  width: 1200px;
  margin: 0 auto;
  height: 614px;
}

.wisdom .head {
  text-align: center;
  padding: 64px 0;
}

.wisdom .head .title {
  font-size: 40px;
  font-weight: 500;
  color: #1f2023;
}

.wisdom .content {
  margin: 64px auto;
  width: 344px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.wisdom .content button {
  cursor: pointer;
  border-radius: 4px;
  width: 160px;
  height: 48px;
  text-align: center;
  line-height: 48px;
}

.wisdom .content .und {
  background: #fff;
  border: 1px solid #4285f4;
  color: #4285f4;
}

.wisdom .content .now {
  background: linear-gradient(131deg, #7eb0ff, #2178ff);
  color: #fff;
}

.mechanisnm {
  background: linear-gradient(180deg, #fff, #f4f8ff 42%);
}

.mechanisnm > div {
  width: 1224px;
  height: 806px;
  margin: 0 auto;
  padding: 0;
}

.mechanisnm .head {
  text-align: center;
  padding: 64px 0;
}

.mechanisnm .head .title {
  font-size: 40px;
  font-weight: 500;
  color: #1f2023;
}

.mechanisnm .conten {
  display: flex;
  justify-content: space-between;
}

.mechanisnm .mecleft {
  width: 625px;
  height: 548px;
}

.mechanisnm .mecright {
  width: 520px;
  text-align: left;
}

.mechanisnm .mecright ul li {
  margin-bottom: 24px;
}

.mechanisnm .mecright ul li .title {
  line-height: 36px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.mechanisnm .mecright ul li .title .content {
  color: #1f2023;
  font-weight: 600;
  margin-left: 16px;
  font-size: 24px;
}

.mechanisnm .mecright ul li .detail {
  font-size: 18px;
  margin-top: 8px;
  color: #74787c;
  padding-left: 38px;
  line-height: 32px;
}

.mechanisnm .conten .mecright .rightButton {
  margin: 64px 0 0 38px;
  width: 344px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.mechanisnm .conten button {
  cursor: pointer;
  width: 160px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  border-radius: 4px;
}

.mechanisnm .rightButton .und {
  background: #fff;
  border: 1px solid #4285f4;
  color: #4285f4;
}

.mechanisnm .rightButton .now {
  background: linear-gradient(131deg, #7eb0ff, #2178ff);
  color: #fff;
}

.media {
  height: 675px;
  margin: 0 auto;
}

.media .head {
  text-align: center;
  padding: 64px 0;
}

.media .head .title {
  font-size: 40px;
  font-weight: 500;
  color: #1f2023;
}

.media .item-content {
  padding: 8px;
  position: relative;
}

.media .newContent {
  height: 444px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 30px;
  padding-left: 352px;
  border-radius: 5px;
  box-shadow: 0 0 10px #e7ebf0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: left;
}

.media .newContent .title {
  font-size: 30px;
  font-weight: 800;
}

.media .newContent .content {
  font-size: 18px;
  line-height: 24px;
  color: #74787c;
}

.media .newContent button {
  width: 113px;
  height: 47px;
}

.school {
  height: 572px;
  margin: 0 auto;
}

.school .head {
  text-align: center;
}

.school .head .title {
  font-size: 40px;
  font-weight: 500;
  color: #1f2023;
}

.school .head .title .number {
  color: #4285f4
}

.school .schoolList {
  position: relative;
  height: 520px;
  vertical-align: middle;
  overflow: hidden;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome {
  background-image: url('../../static/png/welcome-bg.jpg');
  background-position: 50%;
  height: 400px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.welcome .show {
  position: absolute;
  top: 0;
  width: 100%;
}

.welcome .show .content {
  width: 336px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.welcome .show .content .head {
  font-weight: 500;
  line-height: 48px;
  font-size: 48px;
  margin-top: 88px;
}

.welcome .show .content .detail {
  font-size: 20px;
  margin-top: 24px;
  margin-bottom: 37px;
}

.welcome .show .content .buttonConten {
  display: flex;
  justify-content: space-around;
}

.welcome .show .content .buttonConten button {
  width: 120px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  cursor: pointer;
}

.welcome .show .content .buttonConten .lian {
  color: #fff;
  background: #5293ff;
  box-sizing: border-box;
  border: 1px solid #fff;
}

.welcome .show .content .buttonConten .free {
  background: #fff;
  color: #5293ff;
}

.layer-one {
  padding: 0 120px;
  display: flex;
  justify-content: space-between;
}

.layer-one .left {
  padding: 65px 0;
}

.layer-one ul {
  overflow: hidden;
  display: flex;
  /*justify-content: center;*/
  /*align-items: center;*/
  margin-top: 30px;
}

.layer-one .bottom-logo {
  width: 128px;
  /*margin-bottom: 8px;*/
}

.layer-one ul li {
  margin-right: 55px;
}

.layer-one ul li a {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.layer-one .right {
  display: flex;
  margin-right: 0;
}

.layer-one .right .contact {
  padding: 60px 0;
  margin-right: 20px;
}

.layer-one .right .contact p {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  display: flex;
}

.layer-one .right .contact p:nth-child(2) {
  font-size: 14px;
  font-weight: 400;
  color: #6d7790;
  margin-top: 2px;
  margin-left: 5px;
}

.right .qrcode {
  padding: 40px 0;
  margin-left: 20px;
}

.layer-one .right p {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-align: center;
}

.layer-two {
  width: 100%;
  height: 48px;
  background: #15191f;
  text-align: center;
}

.layer-two span {
  font-size: 14px;
  color: #647184;
  margin-right: 60px;
  line-height: 48px;
}

.layer-two span a {
  text-decoration: none;
  color: #647184;
}
</style>
